<!DOCTYPE html>
  <head>
    <title>Solutions to the Too Many Markers problem with the Google Maps JavaScript API V3</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markermanager/1.0/src/markermanager.js"></script>
    <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_packed.js"></script>
    <script type="text/javascript" src="/static/js/markers.js"></script>
    <script type="text/javascript" src="/static/js/functions.js"></script>
    <style type="text/css">
    #map {
      width: 900px;
      height: 600px;
    }
    #controls {
      margin: 0;
      list-style: none;
    }
    #controls li {
      display: inline;
      margin-left: 42px;
      font-family: Sans-Serif;
      font-size: 10pt;
    }
    #fusion-hm-li {
      visibility: hidden;
      margin-left: 8px;
    }
    </style>
  </head>
  <body>
  	<table>
  		<tr>
  		<td rowspan="3">
    <div id="map"></div>
    <ul id="controls">
      <li>
        <label for="mgr-cb">Marker Manager</label>
        <input type="checkbox" id="mgr-cb" name="mgr-cb" />
      </li>
      <li>
        <label for="mc-cb">Marker Clusterer</label>
        <input type="checkbox" id="mc-cb" name="mc-cb" />
      </li>
      <li>
        <label for="fusion-cb">Fusion Table Layer</label>
        <input type="checkbox" id="fusion-cb" name="fusion-cb" />
      </li>
      <li id="fusion-hm-li">
        <label for="fusion-hm-cb">with heatmap</label>
        <input type="checkbox" id="fusion-hm-cb" name="fusion-hm-cb" />
      </li>
      <li>
        <label for="kml-cb">KML Layer</label>
        <input type="checkbox" id="kml-cb" name="kml-cb" />
      </li>
    </ul>
  </td>
 <td>
    <div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:20px"> <div style="background-color:#333; padding:0px 5px; font-weight:bold"> <div style="color:#fff; font-size:12px; line-height:20px;"><a href="http://data.worldbank.org/indicator/SP.DYN.CBRT.IN" style="color:#fff;text-decoration:none;" class="active">Birth rate, crude (per 1,000 people)</a></div> </div> <script type="text/javascript"> widgetContext = { "url": "http://data.worldbank.org/widgets/indicator/0/web_widgets_2/SP.DYN.CBRT.IN/countries", "width": 300, "height": 225, "widgetid": "web_widget_iframe_fdadab12e3a6c3004ae9b5de797e7183" }; </script> <div id="web_widget_iframe_fdadab12e3a6c3004ae9b5de797e7183"></div> <script src="http://data.worldbank.org/profiles/datafinder/modules/contrib/web_widgets/iframe/web_widgets_iframe.js"></script>  <div style="font-size: 10px; color:#000">Data from <a href="http://data.worldbank.org/indicator/SP.DYN.CBRT.IN" style="color:#CCC;">World Bank</a></div></div>
     </td>
     
     <td><div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:20px"> <div style="background-color:#333; padding:0px 5px; font-weight:bold"> <div style="color:#fff; font-size:12px; line-height:20px;"><a href="http://data.worldbank.org/indicator/SP.DYN.CBRT.IN" style="color:#fff;text-decoration:none;" class="active">Birth rate, crude (per 1,000 people)</a></div> </div> <script type="text/javascript"> widgetContext = { "url": "http://data.worldbank.org/widgets/indicator/0/web_widgets_2/SP.DYN.CBRT.IN/countries", "width": 300, "height": 225, "widgetid": "web_widget_iframe_6bf1afc38ab50d6460f611884bdf8631" }; </script> <div id="web_widget_iframe_6bf1afc38ab50d6460f611884bdf8631"></div> <script src="http://data.worldbank.org/profiles/datafinder/modules/contrib/web_widgets/iframe/web_widgets_iframe.js"></script>  <div style="font-size: 10px; color:#000">Data from <a href="http://data.worldbank.org/indicator/SP.DYN.CBRT.IN" style="color:#CCC;">World Bank</a></div></div></td>
     </tr>
     <tr>
    <td>
    
  	<div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:20px"> <div style="background-color:#333; padding:0px 5px; font-weight:bold"> <div style="color:#fff; font-size:12px; line-height:20px;"><a href="http://data.worldbank.org/indicator/SP.DYN.LE00.IN/countries?display=graph" style="color:#fff;text-decoration:none;" class="active">Life expectancy at birth, total (years)</a></div> </div> <script type="text/javascript"> widgetContext = { "url": "http://data.worldbank.org/widgets/indicator/0/web_widgets_3/SP.DYN.LE00.IN/countries/1W", "width": 300, "height": 225, "widgetid": "web_widget_iframe_1d91e305c6289d3f311bd01d341ec4a7" }; </script> <div id="web_widget_iframe_1d91e305c6289d3f311bd01d341ec4a7"></div> <script src="http://data.worldbank.org/profiles/datafinder/modules/contrib/web_widgets/iframe/web_widgets_iframe.js"></script>  <div style="font-size: 10px; color:#000">Data from <a href="http://data.worldbank.org/indicator/SP.DYN.LE00.IN/countries?display=graph" style="color:#CCC;">World Bank</a></div></div>
  	</td>
  	<td><div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:20px"> <div style="background-color:#333; padding:0px 5px; font-weight:bold"> <div style="color:#fff; font-size:12px; line-height:20px;"><a href="http://data.worldbank.org/indicator/SI.DST.04TH.20/countries?display=graph" style="color:#fff;text-decoration:none;" class="active">Income share held by fourth 20%</a></div> </div> <script type="text/javascript"> widgetContext = { "url": "http://data.worldbank.org/widgets/indicator/0/web_widgets_3/SI.DST.04TH.20/countries/1W", "width": 300, "height": 225, "widgetid": "web_widget_iframe_c0c8165b2fd96762a0a18a9c9be4078e" }; </script> <div id="web_widget_iframe_c0c8165b2fd96762a0a18a9c9be4078e"></div> <script src="http://data.worldbank.org/profiles/datafinder/modules/contrib/web_widgets/iframe/web_widgets_iframe.js"></script>  <div style="font-size: 10px; color:#000">Data from <a href="http://data.worldbank.org/indicator/SI.DST.04TH.20/countries?display=graph" style="color:#CCC;">World Bank</a></div></div></td>
  	</tr>
  	 <tr><td>
  	<div style="width:300px; font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; line-height:20px"> <div style="background-color:#333; padding:0px 5px; font-weight:bold"> <div style="color:#fff; font-size:12px; line-height:20px;"><a href="http://data.worldbank.org/indicator/FB.BNK.CAPA.ZS/countries/1w?display=map" style="color:#fff;text-decoration:none;" class="active">Bank capital to assets ratio (%)</a></div> </div> <script type="text/javascript"> widgetContext = { "url": "http://data.worldbank.org/widgets/indicator/0/web_widgets_1/FB.BNK.CAPA.ZS/countries/1w", "width": 300, "height": 225, "widgetid": "web_widget_iframe_18f39f3b9d3457d971ebf780632e123e" }; </script> <div id="web_widget_iframe_18f39f3b9d3457d971ebf780632e123e"></div> <script src="http://data.worldbank.org/profiles/datafinder/modules/contrib/web_widgets/iframe/web_widgets_iframe.js"></script>  <div style="font-size: 10px; color:#000">Data from <a href="http://data.worldbank.org/indicator/FB.BNK.CAPA.ZS/countries/1w?display=map" style="color:#CCC;">World Bank</a></div></div>
  	</td>
  	<td>dddd</td>
  	</tr>
  	
  	</table>
  </body>
</html>

